<!--
 * @Author: early-autumn
 * @Date: 2020-05-15 11:42:21
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-05-30 11:55:15
 -->
<template>
  <div class="app-container">
    <el-page-header :style="{ marginBottom: '20px' }" @back="routerBack">
      <div slot="content" class="content">
        <el-form inline>
          <el-form-item :label="patient.name"></el-form-item>
          <el-form-item :label="`${patient.age}`"></el-form-item>
          <el-form-item :label="sexEnum[patient.sex]"></el-form-item>
          <el-form-item label="手机号：">{{
            patient.phoneNumber
          }}</el-form-item>
          <el-form-item label="病历：">{{ patient.caseNumber }}</el-form-item>
          <el-form-item label="TC：">{{ patient.tcName }}</el-form-item>
          <el-form-item label="医生：">{{ patient.doctorName }}</el-form-item>
        </el-form>
      </div>
    </el-page-header>

    <el-tabs v-model="currentTab" type="border-card">
      <el-tab-pane
        v-for="option in tabOptions"
        :key="option.name"
        :label="option.label"
        :name="option.name"
        :lazy="true"
      >
        <component
          :is="option.name"
          v-if="isRouterAlive && currentTab === option.name"
          :patient="patient"
          @change="getPerson"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getPerson } from '@/api/services/person'
import { sexEnum } from '@/utils/enums'
import routerBack from '@/mixins/routerBack'
import {
  ChargeRecordPane,
  ImageRecordPane,
  MedicalRecordPane,
  PatientInformationPane,
  DoctorSeeingRecordPane,
  TCVisitRecordPane,
  TreatmentRecordPane,
  FollowupVisitPane,
} from '@/views/components/TabsPanes'

export default {
  name: 'TCDetails',
  components: {
    PatientInformationPane,
    MedicalRecordPane,
    ImageRecordPane,
    FollowupVisitPane,
    DoctorSeeingRecordPane,
    TCVisitRecordPane,
    TreatmentRecordPane,
    ChargeRecordPane,
  },
  mixins: [routerBack],
  data() {
    return {
      tabOptions: [
        {
          label: '患者信息',
          name: 'PatientInformationPane',
        },
        {
          label: '病历',
          name: 'MedicalRecordPane',
        },
        {
          label: '影像',
          name: 'ImageRecordPane',
        },
        {
          label: '随访',
          name: 'FollowupVisitPane',
        },
        {
          label: '看诊记录',
          name: 'DoctorSeeingRecordPane',
        },
        {
          label: 'TC回访记录',
          name: 'TCVisitRecordPane',
        },
        {
          label: '就诊记录',
          name: 'TreatmentRecordPane',
        },
        {
          label: '收费记录',
          name: 'ChargeRecordPane',
        },
        // {
        //   label: '补牙评分',
        //   name: '',
        // },
        // {
        //   label: '正畸评分',
        //   name: '',
        // },
        // {
        //   label: '根管评分',
        //   name: '',
        // },
        // {
        //   label: '洁牙评分',
        //   name: '',
        // },
        // {
        //   label: '牙周评分',
        //   name: '',
        // },
        // {
        //   label: '种植评分',
        //   name: '',
        // },
        // {
        //   label: '修复评分',
        //   name: '',
        // },
      ],
      currentTab: 'PatientInformationPane',
      patient: {},
      isRouterAlive: true,
    }
  },
  computed: {
    sexEnum() {
      return sexEnum
    },
  },
  watch: {
    currentTab() {
      this.reload()
    },
  },
  mounted() {
    this.getPerson()
  },
  methods: {
    /**
     * 获取患者信息
     */
    async getPerson() {
      const { data } = await getPerson(this.$route.query.id)
      this.patient = data
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: -6px;
  height: 20px;
}
</style>
